<template>
    <div class="bookshelf">
        <div class="top_box">
            <div class="calendar">
                <i class="logo"></i>
            </div>
            <div class="search_box">
                <i class="search"></i>
                <input type="text" placeholder="书架内搜索" />
            </div>
            <div class="set_box">
                <i class="dian"></i>
            </div>
        </div>

        <div class="con_box">
            <span>筛选</span>
            <span class="shu"> | </span>
            <span>管理</span>
        </div>

        <div class="shelf_box">
            <ul>
                <li v-for="item in shelfInfoList" :key="item.id">
                    <router-link :to="{ name: 'detail', query: { id: item.id, title: item.title } }">
                        <div class="img_box">
                            <img :src="item.cover" alt="" />
                        </div>
                        <p>{{ item.title }}</p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { shelfInfo } from "@/api/found";
export default {
    data() {
        return {
            shelfInfoList: [],
        };
    },
    methods: {
        async getshelfInfoList() {
            await shelfInfo({}).then((res) => {
                // console.log(res);
                if (res.code == 0) {
                    this.shelfInfoList = res.data.list;
                }
            });
        },
    },
    created() {
        this.getshelfInfoList();
    },
};
</script>

<style lang="scss" scoped>
.bookshelf {
    // position: relative;
    width: 100%;
    // height: 800px;
    padding: 0 15px;
    margin-bottom: 100px;

    .top_box {
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #999;
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        padding: 10px 0;
        height: 50px;
        // position: fixed;
        // top: 0;
        // left: 0;
        // box-sizing: border-box;

        .calendar {
            // background-color: red;
            width: 15%;
            height: 100%;

            i.logo {
                display: block;
                margin: 0 auto;
                width: 60%;
                height: 100%;
                // background-color: blue;
                background-image: url(@/assets/logo.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }

        .search_box {
            background-color: #f0f0f0;
            width: 70%;
            height: 90%;
            padding: 0 10px;
            display: flex;
            align-items: center;
            border-radius: 20px;
            overflow: hidden;

            i.search {
                // height: 100%;
                display: block;
                width: 20px;
                height: 20px;
                margin-right: 5px;
                // padding: 5px 0;
                box-sizing: border-box;
                // background-color: red;
                background-image: url(@/assets/sousuo.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
            input {
                flex: 1;
                font-size: 14px;
                border: 0;
                background-color: #f0f0f0;
            }
        }

        .set_box {
            flex: 1;
            height: 100%;
            // background-color: red;

            i.dian {
                display: block;
                margin: 0 auto;
                width: 60%;
                height: 100%;
                // background-color: blue;
                background-image: url(@/assets/dian.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    }

    .con_box {
        // padding-top: 50px;
        margin: 10px 0;
        width: 100%;
        text-align: right;
        padding-right: 9px;
        span {
            font-size: 14px;
            color: #313131;
        }
        .shu {
            color: #999;
        }
    }

    .shelf_box {
        width: 100%;
        ul {
            width: 100%;
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;
            li {
                width: 28%;
                margin: 0 9px 10px;
                a {
                    .img_box {
                        width: 100%;
                        img {
                            width: 100%;
                        }
                    }

                    p {
                        font-size: 12px;
                        color: #313131;
                    }
                }
            }
        }
    }
}
</style>
